<template>
  <div v-loading="loading" element-loading-text="加载中..." class="brand_detail">
    <div class="detail_info">
      <div class="title">
        <div class="text">
          <div class="label">品牌名称:</div>
          <div class="value">{{ content?.name }}</div>
        </div>
        <div class="btn_group">
          <HPlainButton @click="changeCode"> 修改品牌</HPlainButton>
          <HPlainButton type="error" @click="deBrand"> 删除品牌</HPlainButton>
        </div>
      </div>
      <div class="line"></div>
      <div class="info">
        <div class="img_list">
          <div class="item">
            <div class="img">
              <el-image style="width: 100px; height: 100px" :src="content?.mark" fit="contain">
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture></Picture></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <p>品牌标志</p>
          </div>
          <!-- <div class="item">
            <div class="img">
              <h-image
                :src="content?.publicNo || defaultImg"
                :show-del-btn="false"
                :show-mask="!!content?.publicNo"
              />
            </div>
            <p>公众号</p>
          </div> -->
        </div>
        <div class="info_list">
          <div class="info_item_container">
            <div class="info_item">
              <div class="label">品牌编码:</div>
              <div class="value">{{ content?.code }}</div>
            </div>
            <div class="info_item">
              <div class="label">联系电话:</div>
              <div class="value">{{ content?.telephone }}</div>
            </div>
            <div class="info_item">
              <div class="label">品牌状态:</div>
              <div class="value">{{ content?.status == false ? '启用' : '禁用' }}</div>
            </div>
          </div>
          <div class="info_item_container">
            <div class="info_item">
              <div class="label">创建时间:</div>
              <div class="value">{{ content?.createTime }}</div>
            </div>
            <div class="info_item">
              <div class="label">更新时间:</div>
              <div class="value">{{ content?.updateTime }}</div>
            </div>
          </div>
          <div class="info_item_container">
            <div class="info_item">
              <div class="label">公司名称:</div>
              <div class="value">{{ content?.company }}</div>
            </div>
            <div class="info_item">
              <div class="label">公司地址:</div>
              <div class="value" v-show="content?.province"
                >{{ content?.province }}-{{ content?.city }}-{{ content?.area }}-{{
                  content?.town
                }}-{{ content?.address }}</div
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="brand_param_introduce">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="品牌参数" name="first">
          <div class="brand_param" v-if="content?.brandParamVos.length > 0">
            <div>自定义参数</div>
            <el-table :data="content?.brandParamVos" border stripe style="width: 100%">
              <el-table-column
                show-overflow-tooltip
                type="index"
                :index="indexMethod"
                label="序号"
                width="30"
              />
              <el-table-column show-overflow-tooltip prop="name" label="参数名称" width="100" />
              <el-table-column show-overflow-tooltip prop="val" label="参数内容" width="200" />
            </el-table>
          </div>
          <el-empty v-else description="暂无数据" />
        </el-tab-pane>
        <el-tab-pane label="品牌介绍" name="second">
          <div class="describe" v-html="content?.describe" v-if="content?.describe"> </div>
          <el-empty v-else description="暂无数据" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import { useRouter, useRoute } from 'vue-router'
  import { getBrandDetail, deleBrand } from '../../../../api/brand'
  import { useSettingStore } from '../../../../store/modules/setting'
  import { useTagsViewStore } from '../../../../store/modules/tagsView'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.good.brandDetail,
  })

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  const TagsViewStore = useTagsViewStore()
  const SettingStore = useSettingStore()
  const activeName = ref('first')
  const router = useRouter()
  const route = useRoute()
  const loading = ref(true)
  const content = ref() // 品牌信息对象

  // 获取品牌信息
  getBrandDetail(route.params.id).then((res) => {
    content.value = res.data.data.row
    loading.value = false
  })

  // 修改品牌
  const changeCode = () => {
    router.push({ path: '/commodity/editbrand/' + route.params.id })
  }

  // 删除品牌
  const deBrand = () => {
    ElMessageBox({
      type: 'error',
      title: '提示',
      message: '确认删除该品牌?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(() => {
      loading.value = true
      deleBrand([content.value.id]).then((res) => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 1500,
        })
        SettingStore.setReload()
        TagsViewStore.delView(route.path) // 关闭当前页面
        router.go(-1) // 返回列表页面
      })
    })
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
